<template>
  <div class="lunbox">
    <div class="topdiv">
      <span>{{ nameofimg }}</span>
    </div>
    <div class="titlee">
      art <br>
      originates from life
    </div>
    <el-carousel height="100vh" :autoplay="isauto" :interval=intervalnum ref="carousel" @change="changeslid" arrow="never">
      <el-carousel-item v-for="item in imgarr" :key="item.id">
        <img :src=item.idView>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script setup lang='js'>
import { onMounted, ref, watch } from 'vue'
const imgarr = ref([
  { id: 0, idView: new URL("../../assets/B07.jpg", import.meta.url).href, picname: '云上别墅' },
  { id: 1, idView: new URL("../../assets/B08.jpg", import.meta.url).href, picname: '张一元总店' },
  { id: 2, idView: new URL("../../assets/G06.jpg", import.meta.url).href, picname: '北京DDP' }
])
//滑动结束3s后，打开自动轮播
const isauto = ref(true)
watch(isauto,()=>{
  setTimeout(()=>{
    isauto.value =true;
  },3000)
})

const intervalnum = 2500;
//盒子滑动
const carousel = ref(null)
const slideBanner = () => {
  //选中item的盒子
  var box = document.querySelector('.el-carousel__container');
  //手指起点X坐标
  var startPoint = 0;
  //手指滑动重点X坐标
  var stopPoint = 0;

  //重置坐标
  var resetPoint = function () {
    startPoint = 0;
    stopPoint = 0;
  }

  //手指按下
  box.addEventListener("touchstart", function (e) {
    //手指按下的时候停止自动轮播
    isauto.value =false;
    //手指点击位置的X坐标
    startPoint = e.changedTouches[0].pageX;
  });
  //手指滑动
  box.addEventListener("touchmove", function (e) {
    //手指滑动后终点位置X的坐标
    stopPoint = e.changedTouches[0].pageX;
  });
  //当手指抬起的时候，判断图片滚动离左右的距离
  box.addEventListener("touchend", function (e) {
    if (stopPoint == 0 || startPoint - stopPoint == 0) {
      resetPoint();
      return;
    }
    if (startPoint - stopPoint > 0) {
      resetPoint();
      carousel.value.next();
      isauto.value = true;
      return;
    }
    if (startPoint - stopPoint < 0) {
      resetPoint();
      carousel.value.prev();
      isauto.value = true;
      return;
    }
  });
}
onMounted(() => {
  slideBanner()
})
//上方标题切换
const nameofimg = ref('云上别墅')
const changeslid = (v) => {
  nameofimg.value = imgarr.value[v].picname
}

</script>

<style  scoped>
.lunbox {
  width: 100vw;
  height: 100vh;
  position: relative;
}

.topdiv {
  position: absolute;
  width: 100vw;
  height: 10vh;
  background: linear-gradient(to bottom, rgb(49, 48, 48), rgba(0, 0, 0, 0));
  /* 定义线性渐变，从黑色到透明色 */
  top: 0;
  color: rgb(250, 250, 250);
  font-size: 20px;
  z-index: 999;
  line-height: 90px;
}

.topdiv span {
  position: absolute;
  right: 30px;
}

.titlee {
  position: absolute;
  font-size: 40px;
  color: white;
  font-weight: 600;
  left: 10px;
  bottom: 300px;
  z-index: 999;
}

img {
  height: 100%;
}
</style>
